<template>
	<div class="zco-video-message-container">
		<div v-if="loading" class="progress">{{ progress + '%' }}</div>
		<canvas v-show="!loading" class="canvas" :id="`${id}canvas`"></canvas>
		<img v-show="!loading && !startRender" class="button" :src="playImage" alt="" />
		<video 
			v-show="url"
			class="video-preview-video" 
			:id="`${id}video`"
			muted 
			autoplay 
			webkit-playsinline 
			playsinline 
			x5-playsinline 
			x5-video-player-type="h5" 
			x5-video-orientation="portrait" 
			x5-video-player-fullscreen="false"
			preload="auto"
			:src="url"
			>
		</video>
		<!-- <div v-show="startRender && !canvasDrawn" class="zco-video-message-loading"></div> -->
	</div>
</template>

<script>
export default {
	props: {
		videoURL: {
			type: String
		},
		status: {
			type: String
		}
	},
	data() {
		return {
			url: '',
			id: parseInt(Math.random() * 999),
			loading: true,
			progress: 0,
			timer: null,
			playImage: require('../../assets/img/play.png'),
			loaded: false,
			canvasDrawn: false,
			startRender: false
		};
	},
	watch: {
		videoURL(newVal) {
			if (newVal) {
				this.url = newVal.replace('http://', 'https://');

				// load video
				this.start(newVal, this.status);
			}
		},
		status(newVal) {
			if (this.videoURL && newVal !== 'in-progress' ) {
				this.start(this.videoURL, newVal);
			}
		}
	},
	mounted() {
		this.id = this.getOnlyId();
		const self = this;
		this.timer = setInterval(() => {
			if (self.progress < 99) {
				self.progress += 3;
			}
		}, 100);
		this.start(this.videoURL, this.status);

		// just for test
		// if (this.videoURL) {
		// 	this.url = this.videoURL.replace('http://', 'http://');
		// 	this.$nextTick(() => {
		// 		this.loadVideo()
		// 	})
		// }
	},
	computed: {},
	methods: {
		getOnlyId() {
			let abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			let [max, min] = [Math.floor(Math.random() * (10 - 7 + 1) + 1), Math.floor(Math.random() * (17 - 10 + 1) + 17)];
			abc = abc
				.sort(() => 0.4 - Math.random())
				.slice(max, min)
				.slice(0, 8)
				.join('');
			var a = new Date().getTime() + abc;
			return a;
		},
		loadVideo() {
			if (!this.url || this.canvasDrawn) {
				return;
			}
			clearInterval(this.timer);
			this.progress = 99;
			const self = this;
			// 获取视频元素
			// const video = document.createElement('video');
			const video = document.getElementById(this.id + 'video');
			// video.id = this.id + 'video';
			// video.muted = true;
			// video.autoplay = true;
			// video.preload = "auto";
			// video.style.objectFit="fill";
			const canvasElem = document.getElementById(this.id + 'canvas');
			const context = canvasElem.getContext('2d');
			let scaleX = 1;
			let height = 0;
			let posY = 0;
			// Load the video and show it

			// 监听视频元数据加载完成事件
			video.addEventListener('loadedmetadata', function () {
				// 将视频跳转到第0秒
				this.currentTime = 0;
				canvasElem.width = 108;
				canvasElem.height = 156;
				scaleX = canvasElem.width / video.videoWidth;
				height = video.videoHeight * scaleX;
				posY = (canvasElem.height - height ) / 2;
			});

			video.addEventListener('loadeddata', function () {
				setTimeout(() => {
					context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, posY, canvasElem.width, height);
					self.loading = false;
					self.canvasDrawn = true;
					self.startRender = false;
					video.pause();
				}, 1000);
			});
			video.src = this.url;
			video.load();
			setTimeout(() => {
				self.loading = false
			}, 3000)
		},
		start(videoURL, status) {
			if (!this.loaded && videoURL && status !== 'in-progress' ) {
				this.loaded = true;
				this.url = videoURL.replace('http://', 'https://');
				// load video
				this.$nextTick(() => {
					this.loadVideo();
				});
			}
		},
		onPlay(event) {
			if (this.canvasDrawn) {
				return
			}
			event.preventDefault();
			event.stopPropagation();
			this.startRender = true;
			this.$nextTick(() => {
				const video = document.getElementById(this.id + 'video');
				video.play();
				
			});
			
		}
	}
};
</script>

<style scoped>
.zco-video-message-container {
	width: 108px;
	height: 156px;
	background-color: #313131;
	border-radius: 4px;
	position: relative;
}
.video-message {
	width: 100%;
	height: 100%;
	object-fit: fill;
	z-index: -1;
	position: relative;
	top: -156px;
}
.progress {
	width: 100%;
	height: fit-content;
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
	line-height: 17px;
	position: relative;
	top: calc(50% - 8px);
	text-align: center;
	background: #ffffff00;
}
.canvas {
	width: 100%;
	height: 100%;
	object-fit: fill;
	position: absolute;
    top: 0;
	border-radius: 4px;
}
.button {
	width: 36px;
	height: 36px;
	position: absolute;
	top: calc(50% - 18px);
	left: calc(50% - 18px);
	cursor: pointer;
}
video {
	position: absolute;
	/* bottom: 100%; */
	width: 100%;
	height: 100%;
	object-fit: fill;
	top: 0;
	left: -1000px;
	z-index: -1;
}


.zco-video-message-loading {
	position: absolute;
    top: calc(50% - 28px);
    left: calc(50% - 28px);
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	padding: 1.1px;
	background: conic-gradient(#0000 10%,#474bff) content-box;
	-webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
	radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 9px));
	-webkit-mask-composite: destination-in;
	mask-composite: intersect;
	animation: spinner-d55elj 1s infinite steps(10);
}

@keyframes spinner-d55elj {
	to {
		transform: rotate(1turn);
	}
}
</style>
